<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUploadStore } from '../../stores/uploadStore';
import { formatFileSize } from '../../utils/fileUtils';

const uploadStore = useUploadStore();
const selectedImageId = ref<string | null>(null);
const showConfirmDialog = ref(false);

// Compute total size of all uploaded images
const totalSize = computed(() => {
  return uploadStore.images.reduce((sum, img) => sum + img.fileSize, 0);
});

// Compute total number of pixels across all images
const totalPixels = computed(() => {
  return uploadStore.images.reduce((sum, img) => sum + (img.width * img.height), 0);
});

function selectImage(id: string) {
  selectedImageId.value = selectedImageId.value === id ? null : id;
}

function removeImage(id: string) {
  selectedImageId.value = null;
  uploadStore.removeImage(id);
}

function confirmRemoveImage(id: string) {
  selectedImageId.value = id;
  showConfirmDialog.value = true;
}

function confirmRemove() {
  if (selectedImageId.value) {
    removeImage(selectedImageId.value);
  }
  showConfirmDialog.value = false;
}

function cancelRemove() {
  showConfirmDialog.value = false;
}

function clearAllImages() {
  showConfirmDialog.value = false;
  selectedImageId.value = null;
  uploadStore.images = []; // 直接清空图片数组
}
</script>

<template>
  <div class="image-gallery">
    <div class="gallery-header">
      <h3>已上传图片 ({{ uploadStore.images.length }})</h3>
      <div v-if="uploadStore.images.length > 0" class="gallery-actions">
        <button class="clear-button" @click="clearAllImages">清空所有图片</button>
      </div>
    </div>
    
    <div v-if="uploadStore.images.length > 0" class="gallery-summary">
      <p>总大小: {{ formatFileSize(totalSize) }} | 总像素: {{ (totalPixels / 1000000).toFixed(2) }} MP</p>
    </div>
    
    <div v-if="uploadStore.images.length === 0" class="empty-gallery">
      <p>暂无上传图片</p>
    </div>
    <div v-else class="gallery-grid">
      <div 
        v-for="image in uploadStore.images" 
        :key="image.id"
        class="image-item"
        :class="{ selected: selectedImageId === image.id }"
        @click="selectImage(image.id)"
      >
        <div class="image-preview">
          <img :src="image.url" :alt="image.name">
        </div>
        <div class="image-info">
          <p class="image-name">{{ image.name }}</p>
          <p class="image-details">
            {{ image.width }}x{{ image.height }} | {{ formatFileSize(image.fileSize) }}
          </p>
        </div>
        <button 
          class="remove-button" 
          @click.stop="confirmRemoveImage(image.id)"
          aria-label="删除图片"
          tabindex="0"
          @keydown.enter="confirmRemoveImage(image.id)"
          @keydown.space="confirmRemoveImage(image.id)"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"/>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Confirmation Dialog -->
    <div 
      v-if="showConfirmDialog" 
      class="confirm-dialog"
      role="dialog"
      aria-labelledby="dialog-title"
      aria-describedby="dialog-description"
    >
      <div class="confirm-dialog-content">
        <p id="dialog-title">确定要删除这张图片吗？</p>
        <p id="dialog-description" class="visually-hidden">请确认是否要删除所选图片</p>
        <div class="confirm-dialog-actions">
          <button 
            class="cancel-button" 
            @click="cancelRemove"
            @keydown.esc="cancelRemove"
          >
            取消
          </button>
          <button 
            class="confirm-button" 
            @click="confirmRemove"
            @keydown.enter="confirmRemove"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.image-gallery {
  margin-top: 2rem;
}

h3 {
  margin-bottom: 1rem;
}

.empty-gallery {
  padding: 2rem;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  color: #666;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Responsive styles */
@media (max-width: 576px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
  }
}

.image-item {
  position: relative;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.image-preview {
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.image-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-info {
  padding: 0.5rem;
}

.image-name {
  font-size: 0.9rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-details {
  font-size: 0.8rem;
  color: #666;
  margin: 0.25rem 0 0 0;
}

.remove-button {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.remove-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.gallery-header h3 {
  margin: 0;
}

.gallery-actions {
  display: flex;
  gap: 0.5rem;
}

.clear-button {
  padding: 0.25rem 0.5rem;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.clear-button:hover {
  background-color: #d32f2f;
}

.gallery-summary {
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #666;
}

.gallery-summary p {
  margin: 0;
}

.image-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.image-item.selected {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}

.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog-content {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.cancel-button {
  padding: 0.5rem 1rem;
  background-color: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button {
  padding: 0.5rem 1rem;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #d5d5d5;
}

.confirm-button:hover {
  background-color: #d32f2f;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
</style>